<script setup lang="ts">
import { ref, computed } from "vue";
const props = defineProps(["total", "pageSize", "curretpage"]);
//传递给父组件的事件
const emit = defineEmits(["getCurrentPage", "getSizePage"]);
const handleCurrentChange = val => {
  // console.log(`curren page:${val}`)
  emit("getCurrentPage", val);
};
const handleSizeChange = val => {
  emit("getSizePage", val);
};
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

//因为单向数据流，子组件中不能修改props值，例如与v-model绑定
//这里采用计算属性来解决这个问题
const curretPage = computed(() => props.curretpage);
const pageSize = computed(() => props.pageSize);
</script>

<!--分页组件-->
<template>
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="curretPage"
      v-model:page-size="pageSize"
      :page-sizes="[30, 60, 90, 100]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
